2021
ROLE: Design
PROJECT GOALS
- The app should be aesthetically pleasing and easy and intuitive to use.
- The app should be competitive with the book recommendation, discovery, and reviewing features offered by Goodreads and Audible.
At the outset, I wanted to identify what aspects of the Goodreads user experience users like and dislike overall. To this end, I set these research goals:
- Identify best practices for organizing information.
- Identify strategies for promoting more natural social interactions between users.
- Understand pain points that could make usability difficult.
I also resolved to answer the following questions:
- Which features do Goodreads users like and dislike?
- What aspects of Goodreads app UI would users like to see improved?
- What aspects of the Goodreads UI helps promote a sense of community among users?
- What color scheme and UI aesthetics lends themselves best to a book recommendation app?
LANDSCAPE ANALYSIS
To gain a better understanding of the competing apps on the market, I made a feature comparison survey of Goodreads, along with three book apps with similar features to what I would like to accomplish with mine. My landscape analysis of Goodreads, Litsy, Bookly, and Audible led me to identify some key insights and opportunities for how to approach my app:
The most successful of these apps (Goodreads and Audible) have a strong community of users who review books and respond to reviews. This community of reviewers is necessary for the success of a book recommendation platform. Likewise, the ability to make and organized book lists is crucial. Book reviews should be easy to sort on a five-star rating basis so that users can easy parse out differing opinions.
I found very little appealing about Litsy as a product, and Bookly was interesting to me because its visual design was better than most of the others (except perhaps Audible's). Bookly did have an interesting reading tracker functionality that I was curious to try in my own app.
Goodreads and Audible perhaps do the best job at providing multiple ways for users to find book recommendations within the app, but there are distinct opportunities to offer more of these options in a more accessible user interface.
GOODREADS USABILITY TEST
Since my app is largely inspired by Goodreads, I decided to ask some Goodreads users to perform various tasks on the Goodreads app and discuss the user experience. I reached out on social media to friends and acquaintances for this usability test.
Test Objectives
- Identify the features Goodreads users largely prefer.
- Identify the features Goodreads users do not like or find unnecessary.
- Identify best practices for organizing information in the Goodreads app.
- Identify the strategies Goodreads employs to promote social interactions and community and between users.
- Understand user pain points that could make the Goodreads app usability difficult.
My test consisted of 4 participants (3 women and 1 man), all above the age of 21, who are currently users of Goodreads. I video chatted with each, leading themthrough a series of tasks on the app, and then asking them questions about their experiences.
OVERALL PATTERNS BETWEEN PARTICIPANTS
None of my users like the Home screen as it currently is, though most couldn't say how they would change it. Generally, my users did not care for the social component stressed on this page. Most of my users would also like recommendations and the “discover” page featured more prominently in the interface. These opinions led me to wonder if the Home or Search page could be used as a space for book recommendations.
Most of my users use Goodreads as a place to log books, and don't see the need for messages and other social interactions aside from reviewing books and seeing what people are reading. This insight led me to later remove these extraneous social components from my app.
All of my users wanted the app to be more visual pleasing.
RESEARCH CONCLUSIONS
- My app should remove many of the social components currently utilized by Goodreads.
- My app should be much more visually beautiful than Goodreads.
- Means of discovering books via recommendations and friend reviews should be featured prominently on one of the main pages.
SITE MAP
I made a list of product requirements (not shown) based on my research, and used this list to map out all the features and categories that the Bookmark app should offer, considering common app organizational patterns and hierarchy.
I initially conceived of four main pages (Search, Library, Discover, and Profile) that include all the various subcategories. However, in an attempt to further simplify the interface, I combined the Profile and Library pages, and folded the Discover page features into the Search page, as this seemed an obvious home for that functionality. I then made Notifications its own category, because of a common user complaint that notifications are somewhat buried in the Goodreads app.
Also notable is the lack of a profile page. I removed this page because of user feedback that this would not be particularly useful, and also considering that the Library page could double as a profile page in this case. I removed direct messages because of the overwhelming negative response to that social component in my usability tests.
I was interested in developing a dating app style "User Match" feature that would allow users to search for users based on the amount of similiar books read on the app. Likewise, a "User Search" function would simply allow users to search for users like on social media sites like Instagram. I would still be interested in adding these features at a later date, but cut these features due to lack of time.
Following is a selection of the wireframes for the Bookmark app that I created as an early attempt to develop content and establish placement of the content hierarchy throughout the homepage. I attempted a clean, minimal style inspired by the Medium and VSCO apps.
I thought of my Library page as something of a cross between Instagram's profile page and Goodreads's home page. I tried to improve on the Goodreads's swipeable icons for each list or "shelf", as I decided to call them, making the icons larger so that each book cover would be more visible.
Goodreads includes "Reading Challenge" and "Your Year in Books" features that many users in my interviews mentioned enjoying. The "Reading Challenge" allows users to set a track progress on a reading goal for each year, and to also see friends' goals and progress.
"Your Year in Books" is a visual representation of all the books users mark as completed within a calendar year, accompanied by computer-generated statistics about the books read by a particular user.
As with the Library page, I designed both the "Reading Challenge" and "Your Year in Books" minimally to put more visual emphasis on the book covers.
The first two screens of the fourth row show the different screen states accessible via the "Genre" and "List" buttons. The third screen is accessible by clicking a "Popular Lists" button. The fourth screen allows the user to filter lists by genre, and is accessible via the slider icon at the top right of the third screen.
The fourth screen of this row shows a book detail page. I decided to feature the cover more prominently than it is on Goodreads, and tried to arrange the necessary book information in a minimal and aesthetically pleasing way.
I made six different style explorations for my user interface, trying out a number of varying typeface combinations and color schemes. I went on a deep dive through Pinterest for my color palette inspiration, choosing a palette from such sources as concert show flyers, book covers, and oil paintings that I found inspiring.
I searched through my current typeface library, and also made an in-depth search of prominent type foundries for ideas. I included a sampling of classic book typefaces in these explorations, such as Baskerville, Plantin, and Caslon. I also gravitated naturally toward typefaces such as Tenez, Tiempos, and Grilli Type's America, because I felt they had some undefinable "literary" quality to them that I liked. Most of I all I was taken by the playful and vaguely European Nouvelle Grotesk and Founder Grotesk as header fonts, but I ended up gravitating away from these because I found them too difficult to pair fonts with.
The style tile below shows the basis for my UI. Following my wireframe inspiration from the Medium and VSCO apps, I went for a minimal color palette of charcoals and grays, with the idea that book cover images will provide the color and visual interest.
I chose Caslon Graphique as my header font after exploring variants on the classic Caslon typeface. For body font, I was drawn by Akzidenz Grotesk's minimal, slightly playful style that seemed to pair better with the header font than the other flashier grotesks I had experimented with earlier.
UI DESIGN
Following are just some of the screens I designed for my Bookmark book recommendation app. I streamlined many of the pages and features from Goodreads down to the most necessary ones. Above all, I emphasized minimalism and usability in the design, allowing book cover imagery to provide the app's visual interest.
These three screens below the sign-in and account creation screens I created for the app. They take much visual inspiration from the Medium app.
Like above, the action sheets in the second and third screens below changed notably from the earlier wireframe versions in an attempt toward better user accessibility and readability.
View High-Fidelity Prototype